require('./Pagegsgglist.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea} from  'react-weui/build/packages'
import zb  from './../../../assets/icon/zhzj/坐标.png';
import ht  from './../../../assets/icon/zhzj/话筒.png';
import tushen  from './../../../assets/icon/zhzj/图审.png';
import shigong  from './../../../assets/icon/zhzj/施工许可查询.png';
import zhaobiao  from './../../../assets/img/招标公告.png';
import zhongbiao  from './../../../assets/img/中标公告.png';
import hetong  from './../../../assets/img/合同备案.png';
import {Control} from 'react-keeper';


class Gsgglist extends React.Component {
  constructor(props) {
    super(props);
    this.scrollLoadMore = this.scrollLoadMore.bind(this);
    this.clearList=this.clearList.bind(this);
  }

  scrollLoadMore(){
    let clientHeight = this.refs.bodyBox.clientHeight; //可视区域高度
    let scrollTop  = this.refs.bodyBox.scrollTop;  //滚动条滚动高度
    let scrollHeight = this.refs.bodyBox.scrollHeight; //滚动内容高度
    if((clientHeight+scrollTop)==(scrollHeight)) { //如果滚动到底部 }
      Actions.scrollLoadMore();
    }
  }

  clearList(){
    Actions.clearList();
  }

  render() {
    return (
      <div className="page dgzslist" height="100%"
           onScroll={this.scrollLoadMore}
           ref="bodyBox">
            {this.state.gsgglist.suggestList.map((item,i)=>{
              return (
                <Panel>
                  <PanelBody>
                <MediaBox type="appmsg" onClick={(e) =>
                {Control.go('/gsgghome/gsggdetail',{dataDetail:item
                })}}>
                  <MediaBoxHeader>
                    <img src={item.suggesttype==1?tushen:
                      item.suggesttype==2?shigong:
                        item.suggesttype==3?zhaobiao:
                          item.suggesttype==4?zhongbiao:
                            item.suggesttype==5?hetong:null} style={{
                      width:30,
                      height:30,
                      marginTop:15
                    }}/>
                  </MediaBoxHeader>
                  <MediaBoxBody>
                    <MediaBoxTitle style={{
                      width:"64%",
                      float:"left"
                    }}>
                      <span className="pname">{item.title}</span>
                    </MediaBoxTitle>
                    <MediaBoxTitle  style={{
                      width:"35%",
                      float:"left"
                    }}>
                      <span className="chulizhuangtai">{
                        item.datastatus==2?'已撤销':
                          item.viewstatus==1?'已提交待回复':'已回复'
                      }</span>
                    </MediaBoxTitle>
                    <MediaBoxDescription style={{
                      float:"left",
                      width:"100%"
                    }}>
                      {item.createTime}
                    </MediaBoxDescription>
                    <MediaBoxDescription  style={{
                      float:"left"
                    }}>
                      <img src={zb}
                           style={{
                             width: '15px',
                             height:'15px',
                             marginRight: '5px'
                           }}/>
                      <span className="pname">{item.location}</span><br/>
                      <img src={ht}
                           style={{
                             width: '15px',
                             height:'15px',
                             marginRight: '5px'
                           }}/>
                      <span className="pname">{item.viewdesc}</span>
                    </MediaBoxDescription>
                  </MediaBoxBody>
                </MediaBox>
                  </PanelBody>
                </Panel>
              )
            })
            }

      </div>);
  }

  componentWillMount() {
    //清空list
    Actions.clearList();
    if(Control.state){
      Actions.loadSuggestionList(Control.state);
    }else{
      Actions.loadSuggestionList();
    }

  }

  componentDidMount() {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.gsgglist || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Gsgglist, Reflux.connect(Store, 'gsgglist'));


export default Gsgglist ;
